<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 to-indigo-50 dark:from-gray-900 dark:to-black px-4 py-24">
    <div class="max-w-3xl mx-auto">

      <!-- 顶部标题 -->
      <h1 class="text-3xl font-extrabold bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 text-transparent bg-clip-text mb-8">
        贡献题目
      </h1>

      <!-- 主表单卡片 -->
      <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 mb-8">
        <form @submit.prevent="handleSubmit" class="space-y-6">

          <!-- 标题 -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">汤面标题</label>
            <input
              v-model="form.title"
              type="text"
              required
              placeholder="给题目起个名字"
              class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:bg-white dark:focus:bg-black focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
            />
          </div>

          <!-- 汤面描述 -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">汤面描述（玩家看到的悬念）</label>
            <textarea
              v-model="form.surface"
              required
              rows="4"
              placeholder="写下离奇的故事结局或现象"
              class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:bg-white dark:focus:bg-black focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition resize-none"
            ></textarea>
          </div>

          <!-- 汤底真相 -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">汤底真相（标准答案）</label>
            <textarea
              v-model="form.base"
              required
              rows="4"
              placeholder="完整还原事情真相"
              class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:bg-white dark:focus:bg-black focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition resize-none"
            ></textarea>
          </div>

          <!-- 难度 -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">难度</label>
            <select
              v-model="form.difficulty"
              required
              class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:bg-white dark:focus:bg-black focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
            >
              <option value="简单">简单</option>
              <option value="中等">中等</option>
              <option value="困难">困难</option>
            </select>
          </div>

          <!-- 提示 -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">提示（最多 3 条，回车分隔）</label>
            <textarea
              v-model="hintsText"
              rows="3"
              placeholder="第一条&#10;第二条&#10;第三条"
              class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:bg-white dark:focus:bg-black focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition resize-none"
            ></textarea>
          </div>

          <!-- 提交按钮 -->
          <div class="text-center pt-2">
            <button
              type="submit"
              :disabled="submitting"
              class="px-8 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-lg shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition transform hover:-translate-y-0.5"
            >
              {{ submitting ? '提交中...' : '提交审核' }}
            </button>
          </div>

          <!-- 结果提示 -->
          <div
            v-if="result.message"
            class="text-center text-sm mt-2"
            :class="result.success ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'"
          >
            {{ result.message }}
          </div>
        </form>
      </div>

      <!-- 我的贡献 -->
      <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
        <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">我的贡献</h2>
        <div v-if="myList.length" class="space-y-3">
          <div
            v-for="item in myList"
            :key="item.id"
            class="rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3 hover:shadow transition"
          >
            <div class="flex items-center justify-between">
              <h3 class="font-semibold text-gray-800 dark:text-gray-100">{{ item.title }}</h3>
              <span
                class="text-xs px-2 py-0.5 rounded-full"
                :class="item.status === '审核中' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300' : 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'"
              >
                {{ item.status }}
              </span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 line-clamp-2">{{ item.surface }}</p>
            <div class="text-xs text-gray-400 mt-2">{{ item.createdAt }}</div>
          </div>
        </div>
        <div v-else class="text-center text-gray-400 py-6">暂无记录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

/* ---------- 表单数据 ---------- */
const form = reactive({
  title: '',
  surface: '',
  base: '',
  difficulty: '中等',
  hints: []
})
const hintsText = ref('')
const submitting = ref(false)
const result = reactive({ message: '', success: true })

/* ---------- 我的贡献列表 ---------- */
const myList = ref([])

/* ---------- 提交 ---------- */
async function handleSubmit() {
  submitting.value = true
  result.message = ''

  if (!form.title || !form.surface || !form.base) {
    result.message = '请填写完整'
    result.success = false
    submitting.value = false
    return
  }

  form.hints = hintsText.value.split('\n').filter(Boolean).slice(0, 3)
  const payload = { ...form }

  // 模拟接口
  setTimeout(() => {
    const id = Date.now()
    myList.value.unshift({
      id,
      title: payload.title,
      surface: payload.surface,
      status: '审核中',
      createdAt: new Date().toLocaleString('zh-CN')
    })
    localStorage.setItem('contribute_list', JSON.stringify(myList.value))

    result.message = '提交成功，审核通过后将发放奖励！'
    result.success = true
    submitting.value = false

    // 重置表单
    Object.assign(form, { title: '', surface: '', base: '', difficulty: '中等', hints: [] })
    hintsText.value = ''
  }, 800)
}

/* ---------- 初始化 ---------- */
onMounted(() => {
  myList.value = JSON.parse(localStorage.getItem('contribute_list') || '[]')
})
</script>